<template>
  <div class="my">
    <div class="bg" :style="{backgroundImage: `url(${userInfo.userBg})`}">
      <div class="bg-uploader"><van-uploader :max-size="500 * 1024" :after-read="uploadBackground" /></div>
    </div>
    <div class="my-box">
      <div class="headportrait">
        <div class="uploader"><van-uploader :max-size="500 * 1024" :after-read="uploadAvatar" /></div>
        <img :src="userInfo.userImg" alt=""></div>
      <!-- 我的信息 -->
      <div class="name">
        <div class="names">{{userInfo.nickName}}</div>
        <div class="gx">{{userInfo.desc ? userInfo.desc : '这家伙很懒，什么都没留下。'}}</div>
      </div>
    </div>
    <!-- 我的钱包 -->
    <div class="money-box">
      <div class="moneys">
        <img src="../assets/img/钱包.png" alt="" />
        <div>钱包</div>
      </div>
      <div class="moneys">
        <img src="../assets/img/星球.png" alt="" />
        <div>积分商城</div>
      </div>
      <div class="moneys">
        <img src="../assets/img/卡卷.png" alt="" />
        <div>卷</div>
      </div>
    </div>
    <!-- 我的资料 -->
    <div class="mydata">
      <ul>
        <li @click="PersonalData">
          <img src="../assets/img/我的.png" alt="" />
          <div>个人资料</div>
          <img src="../assets/img/大于号.png" alt="" />
        </li>
        <li @click="Order">
          <img src="../assets/img/订单.png" alt="" />
          <div>我的订单</div>
          <img src="../assets/img/大于号.png" alt="" />
        </li>
        <li @click="Collection">
          <img src="../assets/img/收藏.png" alt="" />
          <div>我的收藏</div>
          <img src="../assets/img/大于号.png" alt="" />
        </li>
        <li @click="AddressList">
          <img src="../assets/img/地址.png" alt="" />
          <div>地址管理</div>
          <img src="../assets/img/大于号.png" alt="" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import "../assets/less/my.less";
export default {
  name: "My",
  data(){
    return{
      //用户信息
      userInfo: {},
    }
  },
  created(){
    this.getUserInfo();
  },
  methods: {
    //地址管理
    AddressList() {
      this.$router.push({ name: "AddressList" });
    },
    //地址管理
    Collection() {
      this.$router.push({ name: "Collection" });
    },
    //我的订单
    Order() {
      this.$router.push({ name: "Order" });
    },
    //获取用户信息
    getUserInfo() {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        //请求方式
        method: "GET",
        url: this.baseUrl + "/findMy",
        params: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((res) => {
          // console.log("res getUserInfo ==> ", res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code === "A001") {
            this.userInfo = res.data.result[0];
            // console.log(this.userInfo)
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    //上传头像
    uploadAvatar(file) {
      // console.log("file ==> ", file);

      //限制上传文件类型
      let types = ["png", "gif", "jpg", "jpeg"];

      //截取上传图片的类型
      let type = file.file.type.split("/")[1];
      console.log("type ==> ", type);

      if (types.indexOf(type) === -1) {
        return this.$toast({
          message: `文件类型只支持${types.join(",")}`,
          forbidClick: true,
          duration: 3000,
        });
      }

      //处理base64
      let base64 = file.content.replace(/data:image\/[A-Za-z]+;base64,/, "");

      // console.log('base64 ==> ', base64);

      //发起上传图片请求
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        //请求方式
        method: "POST",
        url: this.baseUrl + "/updateAvatar",
        data: {
          appkey: this.appkey,
          tokenString,
          imgType: type,
          serverBase64Img: base64,
        },
      })
        .then((res) => {
          console.log("res uploadAvatar ==> ", res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code === "H001") {
            if (res.data.result[0] === 1) {
              this.userInfo.userImg = res.data.userImg;
            }
          }
          this.$toast({
            message: res.data.msg,
            forbidClick: true,
            duration: 3000,
          });
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    //上传背景
    uploadBackground(file) {
      // console.log("file ==> ", file);

      //限制上传文件类型
      let types = ["png", "gif", "jpg", "jpeg"];

      //截取上传图片的类型
      let type = file.file.type.split("/")[1];
      console.log("type ==> ", type);

      if (types.indexOf(type) === -1) {
        return this.$toast({
          message: `文件类型只支持${types.join(",")}`,
          forbidClick: true,
          duration: 3000,
        });
      }

      //处理base64
      let base64 = file.content.replace(/data:image\/[A-Za-z]+;base64,/, "");

      // console.log('base64 ==> ', base64);

      //发起上传图片请求
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        //请求方式
        method: "POST",
        url: this.baseUrl + "/updateUserBg",
        data: {
          appkey: this.appkey,
          tokenString,
          imgType: type,
          serverBase64Img: base64,
        },
      })
        .then((res) => {
          // console.log("res uploadBackground ==> ", res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code === "I001") {
            if (res.data.result[0] === 1) {
              this.userInfo.userBg = res.data.userBg;
            }
          }
          this.$toast({
            message: res.data.msg,
            forbidClick: true,
            duration: 3000,
          });
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    //个人资料
    PersonalData(){
      this.$router.push({ name: "PersonalData" });
    }
  },
};
</script>

<style lang="less" scoped>
</style>